import React, { Component } from 'react';
import './stationInfo.scss'
import starts from '../../static/starts.png'
import outline from '../../static/outline.png'
import location from '../../static/location.png'
import phone from '../../static/phone.png'
import { getUrlParam } from '../../utils/tools'
import { oilstation, getMemberInfoCard, getActivityNew, getPopAdvert } from '../../utils/interface'
import { plus, divide, fmtDistance } from '../../utils/maths'
import Loading from '../../comm/loading'
import Confirm from '../../comm/confirm'
import { formatTime } from "../../utils/tools";
import ReactSwiper from 'reactjs-swiper';
import close from '../../static/red_close.png'

class StationInfo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            info: {},
            list: [],
            orderList: [],
            service: "",
            activityList: [],
            memberCardInfo: {},
            loadingState: true,
            state: false,
            newCouponState: false,
            couponLength: 0,
            couponPerAmount: 0,
            preKind: false,
            preKindLength: 0,
            getPopAdvertData: null,
            getPopAdvertState: false,
            bok:true,
        }
    }
    render() {
        const swiperOptions = {
            preloadImages: true,
            autoplay: 4000,
            autoplayDisableOnInteraction: false
        };
        return (
            <div className="station-info">
                {this.state.getPopAdvertState?(
                <div className="modules">
                    {this.state.getPopAdvertData.length>1?(
                    
                    <ReactSwiper swiperOptions={swiperOptions} showPagination items={this.state.getPopAdvertData}
                    className="swiper-example" />
                    
                    ):(<img className="b-2" onClick={this.href.bind(this,this.state.getPopAdvertData[0].link)} src={this.state.getPopAdvertData[0].image}></img>)}
                    <img src={close} onClick={this.close.bind(this)} className="claseIng"></img>
                </div>
            ):""}
                <Loading loadingState={this.state.loadingState} />
                <Confirm setConfirm={this.setConfirm.bind(this)} state={this.state.state} content={'该站点暂不支持点我加油，请联系加油员扫码支付'} />
                {/* <Modiles /> */}
                {this.state.newCouponState ? this.state.preKind ? (<div class="ui-dialog show">
                    <div class="ui-dialog-cnt">
                        <div class="ui-dialog-bd">
                            <p>恭喜您获得{this.state.couponLength}张{this.state.couponPerAmount}元优惠券，已发放到您的优惠卡包</p>
                        </div>
                        <div class="ui-dialog-ft">
                            <button type="button" onClick={this.bindNewCoupon.bind(this)} data-role="button">确定</button>
                        </div>
                    </div>
                </div>) : (<div class="ui-dialog show">
                    <div class="ui-dialog-cnt">
                        <div class="ui-dialog-bd">
                            <p>恭喜您{this.state.preKindLength}张获得优惠券，已发放到您的优惠卡包</p>
                        </div>
                        <div class="ui-dialog-ft">
                            <button type="button" onClick={this.bindNewCoupon.bind(this)} data-role="button">确定</button>
                        </div>
                    </div>
                </div>) : ""}

                <div className="station-header">
                    <div className="header">
                        <img src={this.state.info.imgUrl} className="station-acatar" />
                        <div className="header-info">
                            <p className="station-name">{this.state.info.name}</p>
                            <div className="score">
                                <span>5.0</span>
                                <img src={starts} />
                                <img src={starts} />
                                <img src={starts} />
                                <img src={starts} />
                                <img src={starts} />
                            </div>
                            <div className="serviceListr">
                                <p className="service">{this.state.service}</p>
                            </div>
                        </div>
                    </div>
                    <div className="position-info">
                        <div className="info">
                            <img src={outline} />
                            <div className="position-text">
                                <p>{this.state.info.address}</p>
                                <span>距您{this, this.state.info.distance}</span>
                            </div>
                        </div>
                        <div className="btn">
                            <img src={location} onClick={this.location.bind(this, this.state.info.lat, this.state.info.lot)} className="distance" />
                            <i></i>
                            <a href={'tel:' + this.state.info.tel}>
                                <img src={phone} className="phone" />
                            </a>

                        </div>
                    </div>
                    {this.state.activityList.map((item, idx) => {
                        return <img key={idx} src={item.picUrl} onClick={item.activityNum && item.activityNum > 0 ? this.goherf.bind(this, item) : item.activityId ? this.getActy.bind(this, item) : ''} className="banner" />
                    })}
                </div>
                <div className="oil-price-title">
                    <p>参考油价</p>
                </div>
                <div className="oil-list">
                    {this.state.list.map((item, idx) => {
                        return (
                            <div className="list-item" key={idx}>
                                <p className="wid"><i>{item.productInfoName + (item.productName == "LNG" || item.productName == "CNG" ? '' : item.productName)}</i>
                                    {(<span>比国标价降{(item.priceStandard - item.plateformPrice) / 100}元</span>)}
                                </p>

                                <div className="oil-price">

                                    {item.cutPrice > 0 ? (<span>补贴{item.cutPrice / 100}元/L</span>) : <i></i>}

                                    <p className="orice">{item.plateformPrice / 100}元/L</p>
                                </div>
                            </div>
                        )
                    })}
                </div>
                <div className="oil-price-title">
                    <p>实时订单</p>
                </div>
                <div className="order-list">
                    {this.state.orderList.map((item, idx) => {
                        return (
                            <div className="order-item" key={idx}>
                                <p>{item.timeCell}前</p>
                                <p>{item.phone}</p>
                                <p>消费{item.p2}元</p>
                                <div>省{item.p}元</div>
                            </div>
                        )
                    })}
                </div>
                <button className="infoBtn" onClick={this.go_pay.bind(this)}>立即加油</button>
            </div>
        );
    }
    componentDidMount() {
        document.title = "油站详情"
        this.getInfo()
        this.getCardList()
        this.getPopAdvert()
    }
    setConfirm() {
        this.setState({
            state: false
        })
    }
    close(){
        this.setState({
            getPopAdvertState: false
        })
    }
    href(link){
        window.location.href=link
    }
    getInfo() {
        oilstation({ id: getUrlParam('stationId'), lat: Number(getUrlParam('lat')), lot: Number(getUrlParam('lot')), memberId: getUrlParam("id") }).then(res => {
            let activityList = []
            if (res.data.result && res.data.result.orderDTOList && res.data.result.orderDTOList.length) {
                res.data.result.orderDTOList.map(item => {
                    item.p = plus(divide(item.activityReduction, 100), divide(item.couponAmount, 100))
                    item.p2 = divide(item.orderAmount, 100)
                    if (item.phone) {
                        item.phone = item.phone.replace(item.phone.substring(3, 7), "****")

                    } else {
                        item.phone = "138****3838"
                    }
                })
            }
            if (res.data.result.bannerDTOList && res.data.result.bannerDTOList.length) {
                res.data.result.bannerDTOList.map(item => {
                    if (!item.memberId) {
                        activityList.push(item)
                    }
                })
            }
            let service = ""
            if (res.data.result.serviceCardStoreDTOList && res.data.result.serviceCardStoreDTOList.length) {
                res.data.result.serviceCardStoreDTOList.map((item, index) => {
                    service += index == 0 ? item.serviceCardName : ' | ' + item.serviceCardName
                })
            }
            res.data.result.distance = fmtDistance(res.data.result.distance)
            this.setState({
                info: res.data.result,
                list: res.data.result.productInfoStoreDTOList,
                orderList: res.data.result.orderDTOList,
                service: service,
                activityList: activityList,
                loadingState: false,
                bok:true
            })
        })
    }
    bindNewCoupon() {
        this.setState({
            newCouponState: false
        })
    }
    location(latitude, longitude) {
        window.wx.miniProgram.navigateTo({
            url: "/pages/map/map?lat=" + Number(latitude) + '&lot=' + Number(longitude)
        })
    }
    go_pay() {
        if (this.state.info.checkSwitch == '0') {
            this.setState({
                state: true
            })
            return false
        }
        window.wx.miniProgram.navigateTo({
            url: '/pages/nextY/nextY?storeid=' + getUrlParam('stationId') + '&showOil=true'
        })
    }
    goherf(item) {
        if (item.link && item.link.indexOf('/pages') != -1) {
            window.wx.miniProgram.navigateTo({
                url: item.link + "?stationId=" + getUrlParam('stationId') + "&memberCardId=" + this.state.memberCardInfo.id + "&parductId=" + this.state.memberCardInfo.productId
            })
        } else {
            console.log(item.link)
            window.location.href = item.link
        }
    }
    getActy(item) {
        if(!this.state.bok){
            return false
        }
        console.log( this.state.bok)
        this.state.bok = false
        console.log("dfdfdfdf")
        getActivityNew({ activityId: item.activityId, memberId: getUrlParam("id") }).then(res => {
            if (res.data.result && res.data.result.length) {
                res.data.result[0].couponList.map(item => {
                    if (item.money > 0) {
                    }
                    if (item.preKind == 1) {
                        this.state.preKind = true
                        this.state.couponLength++
                        this.state.couponPerAmount += item.preAmount / 100
                    }
                    if (item.preKind == 2) {
                        this.state.preKindLength++
                    }
                })
                this.setState({
                    newCouponState: true,
                    couponLength: this.state.couponLength,
                    couponPerAmount: this.state.couponPerAmount,
                    preKind: this.state.preKind
                })
            } else {
                alert(res.data.message)
            }
            this.getInfo()
        })
    }
    getCardList() {
        getMemberInfoCard({ memberId: getUrlParam("id") }).then(res => {
            console.log(res.data.result, "会员卡信息")
            if (res.data.result) {
                this.setState({
                    memberCardInfo: res.data.result[0]
                })
            }
        })
    }
    getPopAdvert() {
        let getPopAdvertStorage = JSON.parse(localStorage.getItem('getPopAdvert'))
        console.log(getPopAdvertStorage)
        let state = true
        getPopAdvert({
            position: 5,
            storeId: getUrlParam('stationId')
        }).then(res => {
            if (res.data.status == 200) {
                if (getPopAdvertStorage && getPopAdvertStorage.length) {
                    getPopAdvertStorage.map(item => {
                        if (item.id == res.data.result[0].id && item.date == formatTime(new Date()).split(" ")[0]) {
                            state = false
                        }
                    })
                } else {
                    getPopAdvertStorage = []
                    getPopAdvertStorage.push({
                        id: res.data.result[0].id,
                        date: formatTime(new Date()).split(" ")[0]
                    })
                    localStorage.setItem('getPopAdvert', JSON.stringify(getPopAdvertStorage))
                }
                if (state) {
                    getPopAdvertStorage.push({
                        id: res.data.result[0].id,
                        date: formatTime(new Date()).split(" ")[0]
                    })
                    localStorage.setItem('getPopAdvert', JSON.stringify(getPopAdvertStorage))
                    let getPopAdvertData = []
                    res.data.result.map(item=>{
                        getPopAdvertData.push({image:item.picUrl,link:item.linkUrl})
                    })
                    console.log(getPopAdvertData)
                    this.setState({
                        getPopAdvertData: getPopAdvertData,
                        getPopAdvertState: true
                    })
                }
            }
        })
    }
}

export default StationInfo; 